import React, { FC, useDeferredValue, useState, } from 'react';
export const DeferredValueComponent: FC = () => {
    const [kw, setKw] = useState('');

    const deferredValue = useDeferredValue(kw); //提供一个state的延迟版本，根据返回延迟的state能够推迟更新一些UI中某一部分，从而达到性能优化的目的。语法格式如下：
    const kwChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setKw(e.target.value);
    }
    return <>
        <h3>useDeferredValue</h3>
        <input type="text" value={kw} onChange={kwChange} />
        <hr />
        <div style={kw!==deferredValue?{opacity:'0.1',transition:'opacity 0.5s ease'}:{opacity:'1',transition:'opacity 0.5s ease'}}>
        <SearchBodyList query={deferredValue} ></SearchBodyList>
        </div>
    </>
}

export const SearchBodyList: FC<{ query: string }> = React.memo((props) => {
    if (!props.query) return

    const items = Array(9999).fill(props.query).map((item, index) => {
        return <li key={index}>{item}</li>
    })
    return items
})

